<!-- 分割线 -->
<template>
    <div class="li-divider flex" :style="styles">
        <template v-if="type == 'vertical'">
            <div :class="[`li-divider-${type}-left`]" :style="{ flex: orientationWidth.left, background: lineColor }"></div>
            <slot></slot>
            <div :class="[`li-divider-${type}-right`]" :style="{ flex: orientationWidth.right, background: lineColor }"></div>
        </template>
        <div v-else class="li-divider-middle"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted, computed } from 'vue';

const props = defineProps({
    // 按钮类型: 垂直 horizontal | 水平 vertical ; 默认: vertical
    type: {
        type: String,
        default: 'vertical'
    },
    // 内容位置: center | left | right ; 默认: center
    orientation: {
        type: String,
        default: 'center'
    },
    // 分割线颜色
    lineColor: {
        type: String,
        default: '#f6f6f6'
    },
    // 上边距：type = vertical 有效
    marginTop: {
        type: [String, Number],
        default: 20
    },
    // 下边距：type = vertical 有效
    marginBottom: {
        type: [String, Number],
        default: 20
    },
    // 左边距：type = horizontal 有效
    marginLeft: {
        type: [String, Number],
        default: 10
    },
    // 右边距：type = horizontal 有效
    marginRight: {
        type: [String, Number],
        default: 10
    }
});

// 位置计算
const orientationWidth: object = computed(() => {
    if (props.orientation === 'left') {
        return { left: 1, right: 20 };
    } else if (props.orientation === 'right') {
        return { left: 20, right: 1 };
    }
    return { left: 1, right: 1 };
});

// 自定义样式
const styles: object = computed(() => {
    let styles: object = {};
    if (props.type == 'horizontal') {
        styles = {
            display: 'inline-block',
            background: props.lineColor,
            marginLeft: props.marginLeft + 'px',
            marginRight: props.marginRight + 'px'
        };
    } else {
        styles = { marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' };
    }
    return styles;
});

const install = (app: any) => {
    app.component('LiDivider', this);
};
</script>

<style lang="less" scoped>
.li-divider {
    .li-divider-vertical-left {
        height: 25px;
        height: 2px;
        margin-right: 10px;
    }
    .li-divider-vertical-right {
        height: 25px;
        height: 2px;
        margin-left: 10px;
    }

    .li-divider-middle {
        height: 13px;
        width: 2px;
    }
}
</style>
